<template>
  <div>
    <Banner :list="bannerList"/>
    <div class="p-1">
      <div>
        {{ t('name') }}
      </div>
      <div>
        {{ t('age', {age: 10}) }}
      </div>
      <div>
        {{ $t('name') }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Banner from '@/components/banner/banner.vue'

import {useI18n} from 'vue-i18n'
import {useQuasar} from 'quasar'
import {reactive} from "vue";

// use global scope
const {t} = useI18n({
  inheritLocale: true
})

const bannerList = reactive([
  'https://cdn.quasar.dev/img/mountains.jpg',
  'https://cdn.quasar.dev/img/parallax1.jpg',
  'https://cdn.quasar.dev/img/parallax2.jpg',
  'https://cdn.quasar.dev/img/quasar.jpg'
])

// const appStore = useAppStore();
const $q = useQuasar()
setTimeout(() => {
  $q.notify({
    message: '认证信息已过期，请重新登录',
    color: 'primary',
    position: 'bottom',
    actions: [
      {
        label: '登录', color: 'yellow', handler: () => { /* ... */
        }
      },
      {
        label: '取消', color: 'white', handler: () => { /* ... */
        }
      }
    ]
  })
}, 2000)
// appStore.$patch({
//   uuid: '',
//   userInfo: {
//     avatar: '',
//     nickName: '',
//     userId: '' ,
//     unionId: '',
//     openId: '',
//     mobile: '',
//   },
//   token:'1234'
// })
</script>

<style scoped>
p {
  font-size: 30px;
}

/* 样式 */
</style>
